<template>
    <table class="my-table">
        <thead>
            <tr>
                <th>就诊日期</th>
                <th>医生姓名</th>
                <th>诊断结果</th>
                <th>处方信息</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in records" :key="index">
                <td>{{ item.date }}</td>
                <td>{{ item.doctor }}</td>
                <td>{{ item.diagnosis }}</td>
                <td>{{ item.prescription }}</td>
                <td @click="ChangeItem(item)">详情</td>
            </tr>
            <DeTail v-show="isShow === true" :data="selectItem" @close="handleChange"></DeTail>
        </tbody>
    </table>
</template>
<script>
import DeTail from './DeTail.vue';
export default {
    components: {
        DeTail,
    },
    props: ['records', 'name'],
    data() {
        return {
            isShow: false,
            selectItem: [],
        }
    },
    methods: {
        ChangeItem(item) {
            this.isShow = true
            this.selectItem = item
        },
        handleChange(value) {
            this.isShow = value
        }
    }
}
</script>
<style>
.my-table {
    border-collapse: collapse;
    width: 100%;
}

.my-table td,
.my-table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.my-table th {
    background-color: #f2f2f2;
}
</style>